{% extends 'layout/basic.html' %}
{% load static %}

{% block title %}
    用户登录
{% endblock %}


{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock %}


{% block content %}
    <div class="container">
        <form id="id_form" class="form-horizontal" method="post" action="/register.html/" novalidate>
            {% csrf_token %}
            <div class="account">
                <div class="form-group">
                    <div class="col-sm-offset-5 col-sm-6">
                        <h2>用户登录</h2>
                    </div>
                </div>

                {% for field in obj %}
                    {% if field.name == 'code' %}
                        <div class="form-group">
                            <label for='{{ field.id_for_label }}'
                                   class="col-sm-3 control-label">{{ field.label }}</label>
                            <div class="col-sm-9">
                                <div class="col-sm-7" style="padding-left: 0;padding-right: 0;">
                                    {{ field }}
                                    <span class="errors">{{ field.errors.0 }}</span>
                                </div>
                                <div class="col-sm-5">
                                    <a id="sms" class="btn btn-default" onclick="SmsSend();">点击获取验证码</a>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="form-group">
                            <label for='{{ field.id_for_label }}'
                                   class="col-sm-3 control-label">{{ field.label }}</label>
                            <div class="col-sm-9">
                                {{ field }}
                                <span class="errors" >{{ field.errors.0 }}</span>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button id="btn_login" type="button" class="btn btn-primary btn-lg">登&nbsp;&nbsp;录</button>
                        <div style="float: right">
                            <a href="{% url 'app01:login' %}">用户名登录?</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}


{% block js %}
    <script>
    $(function () {
        addEye();
    });

    $('#btn_login').click(function () {
        $('.errors').text('');
        $.ajax({
            url: "{% url 'app01:login_sms' %}",
            type: 'POST',
            data: $('#id_form').serialize(),
            dataType: 'JSON',
            success: function (arg) {
                if(arg['status']){
                    location.href = arg['data'];
                }else {
                    $.each(arg['error'], function (key, value) {
                        $('#id_'+key).next().text(value[0]);
                    })
                }
            }
        })

    });



    function SmsSend() {
        var smsSend = $('#sms');
        smsSend[0].onclick = null;
        $.ajax({
            url: "{% url 'app01:sms' %}",
            type: 'POST',
            headers: {'X-CSRFToken': $("input[name='csrfmiddlewaretoken']").val()},
            data: {'phone_num': $('#id_phone_num').val(), 'tpl': 'login'},
            dataType: 'JSON',
            success: function (arg) {
                if (arg['status']) {
                   sendSmsRemind();
                } else {
                    smsSend[0].onclick = SmsSend;
                    $.each(arg['error'], function (key, value) {
                        $('#id_'+key).next().text(value[0]);
                    })
                }

            }
        })
    }
    function sendSmsRemind() {
        $('#id_phone_num').next().text('');
        var smsSend = $('#sms');
        var time = 20;
        var timer = setInterval(function () {
            smsSend.text('剩余时间' + time + '秒');
            time--;
            if (time <= 0) {
                smsSend[0].onclick = SmsSend;
                clearInterval(timer);
                smsSend.text('重新获取验证码');
            }
        }, 1000)
    }


    </script>
{% endblock %}

